<template>
  <view class="content">
    <van-nav-bar :title="navBarTitle" left-arrow @click-left="onClickLeft" v-if="params && params.biaoshi =='mall'"> </van-nav-bar>
    <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" v-if="params && params.biaoshi =='index'"> </van-nav-bar>

    <loading :loadingIsShow="loadingIsShow" v-if="!isrefresher"></loading>
    <view class="main-container" v-show="!loadingIsShow">
      <!-- 分类按钮 -->
      <view class="topBox" v-if="params.biaoshi==='mall'">
        <view class="sort-menu">
          <view class="sort_option item_option" style="width:85%;">
            <scroll-view class="top-tabs-view" scroll-x="true"
              :class="(swiperTabsCurrent + 1) === allData.length ? 'last-top-tabs-view' : ''" show-scrollbar="false"
              :scroll-into-view="tabsCurrent" :scroll-with-animation="true">
              <view class="tabs-topic-view sort_option item_option" v-for="(item, index) in allData"
                :id="'tabNum' + (index + 1)" :key="index" @click="changeTab(index, $event, item)"
                :class="{ 'sort_option_selected': index === swiperTabsCurrent }">
                {{ item.name }}
              </view>
            </scroll-view>
          </view>
          <!-- <view class="sort_option item_option"
            :class="{'sort_option_selected': currentPIndex===index}"
            v-for="(item, index) in allData" :key="index" :id="item.id" @click="changeTab(index, $event, item)">
            {{ item.name }}
          </view> -->
          <view class="sort_option" style="text-align: center;" @click=onClickSort><van-icon name="arrow-down" /></view>
        </view>
        <!-- 综合  价格  排序 -->
        <view class="goods_filter_tabs">
          <view class="filter_option" :class="{'filter_option_selected ': curFilter===val}"
            v-for="(item,val) in goodsFilterList" :key="val" :id="val"
            @click="selectFilter(val, $event, item.filterName)">
            {{item.filterName}}
            <span v-if="item.filterName==='价格'">
              <image :src="isSelect ? desIcon : ascIcon" @click.stop="onChangePriceSort()" class="checked-img" />
            </span>
          </view>
        </view>
      </view>
      <scroll-view :refresher-enabled="false" class="scroll-content" @scroll="scrollPage" scroll-y :lower-threshold="80"
        show-scrollbar="false">
        <view class="scroll-box" v-show="!loadingIsShow">
          <view class="list_title" v-if="params.biaoshi==='index'">{{navBarTitle}}</view>
          <view class="productList_content" v-if="forYouList.length>0">
            <view class="forYouList" v-for="(itemL, indexL) in forYouList" :id="indexL" :key="indexL"
              @click="toGoodsDetail(itemL,indexL,itemL.id)">
              <view class="forYou_img"> <image :src="itemL.image" alt="" mode="widthFix" @error="handleImageError($event, indexL)" :onerror="defaultIcon" />
                <view class="status_tips" v-if="itemL.stock==0">已售罄</view>
              </view>
              <view class="forYou_subtitle pl15 pr15">{{ itemL.storeSubtitle }}</view>
              <view class="forYou_title pl15 pr15">{{ itemL.storeName }}</view>
              <view class="forYou_price pl15 pr15">￥{{ itemL.price }}</view>
            </view>
          </view>
          <template v-if="forYouList.length==0 && !loadingIsShow">
            <van-empty class="custom-image"
              image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/empty_ProductList.png"
              description="暂无相关商品" />
          </template>
        </view>
      </scroll-view>
    </view>
    <van-popup :show="popupShow" position="top" round @click-overlay="closePopup"
      custom-style="width: 100%;overflow:scroll;background:transparent;">
      <view class="popup-content">
        <view class="popup-title">
          <view class="popup-title-left">全部分类</view>
          <view class="popup-title-right" @click="closePopup"><van-icon name="arrow-up" size="12" /></view>
        </view>
        <view class="popup-main">
          <view class="popup-sort">
            <view class="popup-item" :class="{active:curPopup===index}" v-for="(item,index) in popupData" :key="index"
              @click="onClickPopup(index,$event,item)">{{item.name}}</view>
          </view>
        </view>
      </view>
    </van-popup>
  </view>
</template>

  <script>
  import { topStyleWhite, topStyleBlack } from '@/utils/topColor'
  import {getProductListApi,pagingByCategoryIdApi} from '@/api/mall'
  import loading from '@/mycomponents/loading.vue'

  
  export default {
      components: {
        loading
      },
      data () {
          return {
              isrefresher: false,
              loadingIsShow: true,
              loadingIsShowPage: true,
              defaultIcon:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/defaultIcon.png',
              navBarTitle: '产品列表',
              scrolling: false, // 顶部区域吸顶效果
              currentPIndex:0,  //商品分类
              curFilter:0,  //筛选  综合  价格
              curPopup:0, //弹出框
              swiperTabsCurrent: 0, // 页面顶部tabs
              tabsCurrent: 'tabNum1', // 页面顶部tabs
              productLists:[
                {
                  goodsName:'全部'
                },
                {
                  goodsName:'饼干糕点'
                },
                {
                  goodsName:'肉食海鲜'
                },
                {
                  goodsName:'当季美食'
                }
              ],
              goodsFilterList:[
                {
                  filterNum:'0',
                  filterName:'综合'
                },
                {
                  filterNum:'1',
                  filterName:'销量'
                },
                {
                  filterNum:'2',
                  filterName:'价格'
                },
                {
                  filterNum:'3',
                  filterName:'新品优先'
                },
              ],
            forYouList: [ //热卖商品
              // {
              //   // imgurl: require('../../static/shangcheng/goods.png'),
              //   image:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/clothes.png",
              //   storeSubtitle: '美味好物限时抢购送好礼',
              //   storeName: '黄芪杞姜枣糕',
              //   price: '169',
              //   isShouQing:true
              // },
              // {
              //   image:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/dangao.png',
              //   storeSubtitle: '美味好物限时抢购送好礼',
              //   storeName: '黄芪杞姜枣糕',
              //   price: '169',
              //   isShouQing:false
              // },
              // {
              //   image:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/coffee.png",
              //   storeSubtitle: '美味好物限时抢购送好礼',
              //   storeName: '黄芪杞姜枣糕',
              //   price: '169',
              //   isShouQing:false
              // },
              // {
              //   image:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/goods.png",
              //   storeSubtitle: '美味好物限时抢购送好礼',
              //   storeName: '黄芪杞姜枣糕',
              //   price: '169',
              //   isShouQing:false
              // },
              // {
              //   image:"https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/luying.png",
              //   storeSubtitle: '美味好物限时抢购送好礼',
              //   storeName: '黄芪杞姜枣糕',
              //   price: '169',
              //   isShouQing:true
              // },
            ],
            popupShow:false,
            allData:[
              {
                id:0,
                name:'全部'
              }
            ],
            popupData:[
              {
                id:0,
                name:'全部'
              },
              // {
              //   id:1,
              //   name:'糕点饼干'
              // },
              // {
              //   id:2,
              //   name:'肉食海味'
              // },
              // {
              //   id:3,
              //   name:'滋补佳品'
              // },
              // {
              //   id:4,
              //   name:'坚果果干'
              // },
              // {
              //   id:5,
              //   name:'坚果果干'
              // },
              // {
              //   id:6,
              //   name:'坚果果干'
              // },
              // {
              //   id:7,
              //   name:'坚果果干'
              // },
            ],
            params:{},
            desIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/priceSortDes.png',
            ascIcon:
                'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/priceSortAsc.png',
            isSelect:false,
            // itemId:undefined,
            productType:undefined,  //商品类型
            secondCateId:undefined,  //二级分类id
            cateId:undefined,  //三级分类id
            sortType:undefined,  //排序类型  all  综合   price_asc  价格升序  price_desc  价格降序  new_store 新品优先  sales_desc 销量降序
          }
      },
      onLoad (data) {
      // 取到路由携带的参数
        if (data != null && data.params) {
          this.params = JSON.parse(decodeURIComponent(data.params)) || {}
          console.log('params', this.params)
          if(this.params.biaoshi==='mall'){  //从分类页面跳转过来
              this.navBarTitle=this.params.cateName
              this.params.itemList.forEach((item, index) => {
                this.allData.push( // 商品列表
                  Object.assign({}, { name: item.name, id: item.id })
                )
              })
              this.popupData=this.allData
              console.log(this.params.val,'val')

              if(this.params.val===0){
                this.swiperTabsCurrent=0
                this.curPopup=0
              }else{
                this.swiperTabsCurrent=this.params.selectedItemKey+1
                this.curPopup=this.params.selectedItemKey+1
                console.log(this.allData)
                this.cateId=this.params.selectedItem.id //三级分类id
              }
              this.secondCateId=this.params.selectedItem.parentId //二级分类id
              this.sortType='all' //排序类型
          }

          if(this.params.biaoshi ==='index'){  //从惊喜首页跳转过来
            this.navBarTitle=this.params.title
            if(this.params.title.indexOf('新品') > -1){
              this.productType = 'new_product'
            }else if(this.params.title.indexOf('好评') > -1){
              this.productType = 'best_product'
            }else if(this.params.title.indexOf('榜单') > -1){
              this.productType = 'surprise'
            }else if(this.params.title.indexOf('补货') > -1){
              this.productType = 'hot_product'
            }
          }
   
        }
      },
      onUnload() {
        if (this.time) {
          clearTimeout(this.time)
          this.time = null
        }
      },
      onReady () {
        topStyleWhite()
          // const abnormal = this.getAbnormalDetailsMethod()
          // Promise.all([abnormal]).then(() => {
          //     console.log('所有api加载完成')
          //     this.loadingIsShow = false
          // })
          // if(this.params.biaoshi==='mall'){
          //   this.getProductListByCategoryId()
          // }else{
          //   this.getProductList()
          // }
          this.onRefresherMethod()
      },
      methods: {
          onRefresherMethod() {
              if (!this.isrefresher) {
                this.loadingIsShow = true
              }
              let productList = ''
              if (this.params.biaoshi === 'mall') {
                productList = this.getProductListByCategoryId()
              } else {
                productList = this.getProductList()
              }
              Promise.all([productList]).then(() => {
                console.log('所有api加载完成')
                this.loadingIsShow = false
                this.loadingIsShowPage = false
                // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
                this.time = setTimeout(e => {
                  this.isrefresher = false
                }, 200)
              }).catch(error => {
                    this.loadingIsShow = false
                    this.time = setTimeout(e => {
                        this.isrefresher = false
                    }, 200)
                    // 处理任何一个 Promise 失败的情况
                    console.error('获取数据失败:', error);
                });
          },
          // scrolltolower () {
          //     if (this.totalPage <= this.contentData.length) {
          //         this.isLoadAll = true
          //         this.biaozhi = 0
          //         this.loadingText = '没有更多数据啦~'
          //     } else {
          //         this.abnormalDetailsParamas.pageNum++
          //         this.isLoadAll = true
          //         this.loadingText = '加载中...'
          //         this.biaozhi = 1
          //         this.getAbnormalDetailsMethod()
          //     }
          // },
          // 互动页面
          scrollPage(e) {
            console.log(e.detail.scrollTop,this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
              this.scrolling = true
            } else if (e.detail.scrollTop <= 25 && this.scrolling) {
              this.scrolling = false
            }
            // this.bgOpacity = `opacity:${1 - e.detail.scrollTop / this.navHeight}`
            // if (e.detail.scrollTop > 70) {
            //     // console.log(e.detail.scrollTop, 'ssssssssssss')
            //     // this.checkClass = true
            //     this.checkClass = 1
            // } else if (e.detail.scrollTop < 16) {
            //     this.checkClass = 0
            //     // this.checkClass = false
            // } else {
            //     this.checkClass = (e.detail.scrollTop - 16) / 54
            // }
          },

          onClickLeft () {
              uni.navigateBack()
          },
          // 页面顶部的tab
          changeTab(index,e,item){
            console.log(index,e,item,'切换商品  三级分类')
            this.swiperTabsCurrent = index
            // this.curPopup=this.currentPIndex    // 弹窗部分的选项
            this.curPopup=this.swiperTabsCurrent
            this.cateId = item.name === '全部' ? undefined : item.id
            this.getProductListByCategoryId()
          },



          // tab下的排序的内容
          selectFilter(val,e,item){
            this.curFilter=val
            console.log(val,item,'filter')
            if(item==='价格'){
              this.isSelect=!this.isSelect
              if(this.isSelect){
                this.sortType='price_desc'
              }else{
                this.sortType='price_asc'
              }
            }else if(item.includes('新品')){
              this.sortType='new_store'
            }else if(item==='销量'){
              this.sortType='sales_desc'
            }else if(item==='综合'){
              this.sortType='all'
            }
            this.getProductListByCategoryId()
          },
          // 显示弹窗
          onClickSort () {
            this.popupShow = true
            topStyleWhite()
          },
          // 弹窗内点击事件
          onClickPopup(index,e,item){
            console.log(index,e,item,'弹窗内点击事件')
            this.curPopup=index
            this.swiperTabsCurrent = index    //页面顶部的tab
            this.cateId = item.name === '全部'? undefined : item.id
            this.popupShow = false
            this.getProductListByCategoryId()
          },
          // 隐藏弹窗
          closePopup () {
            this.popupShow = false
            topStyleBlack()
          },



          // 跳转商品详情
          toGoodsDetail(item, val,id) {
            console.log(item, val, 'toGoodsDetail')
            const params={}
            params.item=item
            params.productId=id
            params.biaozhi='productList'

            uni.navigateTo({
              url:
                '/pages/shangcheng/goodsDetail?params=' +
                encodeURIComponent(JSON.stringify(params))
            })
          },

          // refresherpulling () {
          //     if (!this.isrefresher) {
          //         this.tableInfo = []
          //         this.contentData = []
          //         this.totalPage = 0
          //         this.loadingText = ''
          //         this.isrefresher = true // 下拉加载，先让其变true再变false才能关闭
          //         this.abnormalDetailsParamas.pageNum = 1
          //         console.log(this.abnormalDetailsParamas.pageNum, 'pageNum')
          //         const interFace = this.getAbnormalDetailsMethod()
          //         Promise.all([interFace]).then(() => {
          //             // 关闭加载状态 (转动的圈)，需要一点延时才能关闭
          //             this.time = setTimeout(e => {
          //                 this.isrefresher = false
          //             }, 100)
          //         })
          //     }
          // },
          onChangePriceSort(){
            if(this.curFilter!==2){
              this.curFilter===2
            }
            this.isSelect=!this.isSelect
            if(this.isSelect){
              this.sortType='price_desc'
            }else{
              this.sortType='price_asc'
            }
            // this.getProductList()
            this.getProductListByCategoryId()
          },
        handleImageError(event, index) {
          this.forYouList[index].image = this.defaultIcon;
          event.target.src = this.defaultIcon;
        },

          // 接口  商品列表
          getProductList(){
            return new Promise((resolve, reject) => {
              //NEW_PRODUCT 新品
              //HOT_PRODUCT 热卖
              //SURPRISE 惊喜
              //BEST_PRODUCT 好评如潮
              getProductListApi({type:this.productType}).then((res)=>{
                  console.log(res.data)
                  if (res.code === 200) {
                      this.forYouList=res.data?.list || []
                      resolve(res)
                  } else {
                      reject(res)
                  }
              })
            })
          },

          // 接口  根据分类id获取商品列表
          getProductListByCategoryId(){
            return new Promise((resolve, reject) => {
              const params = {
                secondCateId: this.secondCateId,
                sortType: this.sortType
              }
              if (this.cateId !== undefined) {
                params.cateId = this.cateId
              }
              pagingByCategoryIdApi(params).then((res)=>{
                  console.log(res.data)
                  if (res.code === 200) {
                      this.forYouList=res.data?.list || []
                      resolve(res)
                  } else {
                      reject(res)
                  }
              })
            })
          }

      }
  }
  </script>
  
  <style lang="scss" scoped>
  .content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    overflow: hidden;
    z-index: -2;
    background: #ffffff;
    background-size: 100%;

  }

  .main-container {
    background: #ffffff;
    overflow: hidden;
    // box-shadow: 0px 4px 10px rgba(61, 92, 153, 0.1);
    height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
  }


  .topBox {
    margin-top: 10px;
    margin-bottom: 12px;
    padding-left: 24px;
    padding-right: 24px;
    width: calc(100% - 48px);
    // padding-left: 11px;
    // padding-right: 11px;

    // 全部分类  menu
    .sort-menu {
      display: flex;
      margin-bottom: 36rpx;
      justify-content: space-between;


      .top-tabs-view {
        display: flex;
        // position: fixed;
        white-space: nowrap;
        padding-right: 25rpx;
        width: calc(100% - 25rpx);

        .tabs-topic-view {
          display: inline-block;
          white-space: nowrap;
          margin-right: 50rpx;
          position: relative;
          //	border-radius: 14px;
          //font-size: 14px;
          //color: #111111;
          height: 32rpx;

          .tabs-topic-act {
            display: inline-block;
            // padding: 0px 12px;
            // height: 28px;
            // line-height: 28px;
            // border-radius: 14px;
            transition: 0.3s;
            font-weight: bold;
          }

          .tabs-topic {
            // font-weight: 400;
            display: inline-block;
            // padding: 0px 12px;
            // height: 28px;
            // line-height: 28px;
            // background: $fill-2;
            // border-radius: 14px;
          }

          .tabs-topic-act .tabs-topic-bottom-color {
            background: #3d7eff;
          }
        }

        .tabs-topic-view:last-child {
          margin-right: 0px;
        }
      }

      .last-top-tabs-view {
        // width: calc(100% - 64px);
      }

      ::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
        color: transparent;
      }

      .un-act-border {
        border: 1px solid #f9f9f9;
      }

      .sort_option {
        flex: auto;
        font-weight: bolder;
        line-height: 36rpx;
      }

      .sort_option_selected {
        font-weight: bolder;
        line-height: 36rpx;
        font-size: 36rpx;
        text-align: left;
        color: #111111;
      }
    }

    // 按钮公用样式
    .item_option {
      line-height: 28rpx;
      font-size: 28rpx;
      text-align: left;
      color: #666666;
    }



    // 综合  销量  价格按钮
    .goods_filter_tabs {
      display: flex;
      color: #333333;

      .filter_option {
        // font-weight: bold;
        border: 1px solid #e1e1e1;
        border-radius: 25px;
        margin-right: 10px;
        height: 24px;
        line-height: 24px;
        padding-left: 9px;
        padding-right: 9px;
        display: flex;
        align-items: center;

        font-size: 24rpx;
        text-align: left;
        color: #666666;

      }

      .filter_option_selected:last-child {
        margin-right: 0px;
      }

      .filter_option_selected {
        border: 1px solid #111111;
        font-size: 24rpx;
        text-align: left;
        color: #111111;
      }
    }
  }

  // 滚动
  .scroll-content {
    flex: 1;
    height: 1px;
  }

  .scroll-box {
    padding-left: 48rpx;
    padding-right: 48rpx;
    height: 100vh;
  }

  .list_title {
    font-size: 60rpx;
    margin-bottom: 70rpx;
  }

  .productList_content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    /* 允许Flex项目换行 */
  }

  .forYouList {
    // 缺少背景 边框 阴影
    // 盒子整体 距下一个10px、
    margin-bottom: 20px;
    box-shadow: 1px 1px 5px 0 rgb(231, 231, 231, 0.29);
    background: #ffffff;
    // width: 46%;
    width: 310rpx;

    .forYou_img {
      position: relative;
      // height: 156px;
      // line-height: 156px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 310rpx;
      height: 310rpx;
      overflow: hidden;

      image {
        // width: 100%;
        // height: auto;
        width: 100%;
        height:100%;
        object-fit: cover;
      }

    }

    .status_tips {
      position: absolute;
      height: 108rpx;
      width: 100%;
      background: rgb(240, 240, 240, 0.66);
      align-items: center;
      text-align: center;
      line-height: 108rpx;
      font-size: 28rpx;
      text-align: center;
      color: #666666;
      bottom: 0rpx;
    }

    .forYou_subtitle {
      //副标题不存在换行   不用省略号
      width: calc(100% - 30px);
      // display: -webkit-box;
      // -webkit-line-clamp: 2;
      // -webkit-box-orient: vertical;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: normal;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 20rpx;
      // line-height: 10px;
      // height: 27px;
      text-align: left;
      color: #666666;
      margin-top: 26rpx;
      margin-bottom: 24rpx;
      min-height: 30rpx;
    }

    .forYou_title {
      // max-width: 126px;
      width: calc(100% - 30px);
      // background: palegoldenrod;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 28rpx;
      // line-height: 14px;
      text-align: left;
      color: #111111;
      // margin-top: 12px;
    }

    .forYou_price {
      font-weight: bolder;
      line-height: 32rpx;
      font-size: 32rpx;
      text-align: left;
      color: #111111;
      margin-top: 22rpx;
      margin-bottom: 26rpx;
    }
  }



  // 弹窗
  .popup-content {

    // height: 247px;
    padding-top: 100px;
    font-size: 14px;
    background: #ffffff;
    border-radius: 0 0 12px 12px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 35px;


    .popup-title {
      display: flex;
      justify-content: space-between;
      font-style: normal;
      // font-weight: 400;
      // padding-bottom: 16px;
      height: 28px;
      font-size: 14px;
      text-align: left;
      color: #666666;
      line-height: 28px;
    }

    .popup-main {
      margin-top: 20px;
      width: 100%;
    }

    .popup-sort {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }

    .popup-item {
      // width:30%;
      border: 1px solid #e1e1e1;
      margin-right: 12px;
      margin-bottom: 12px;
      font-size:26rpx;
      text-align: center;
      color: #737373;
      height: 28px;
      line-height: 28px;
      padding-left: 22px;  //20rpx
      padding-right: 22px; //20rpx


      &.active {
        border: 1px solid #111111;
        color: #111111;
      }
    }

    // .popup-item:nth-child(3n) {
    //       margin-right: 0;
    //   }


  }

  .checked-img {
    height: 18rpx;
    width: 10rpx;
    margin-left: 10rpx;
  }

  .loading {
    text-align: center;
    /* height: 40px; */
    margin-top: 16px;
    color: #242629;
    // font-weight: 400;
    font-size: 14px;
  }

  ::v-deep .van-nav-bar {
    // background-color: #f9f9f9 !important;
    z-index: 999 !important;
  }

  ::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
  }

  ::v-deep .van-icon {
    color: #242629 !important;
  }

  // ::v-deep .van-icon::before {
  //   content: "";
  //   display: block;
  //   width: 24px;
  //   background-size: 24px;
  //   height: 24px;
  // }
  ::v-deep .van-nav-bar__title {
    font-size: 14px;
    color: #333333;
  }

::v-deep .van-empty {
    margin-top: 100rpx;
    border-radius: 12px;
    padding: 0px !important;
}

::v-deep .van-empty__image{
    width: 400rpx !important;
    height: 400rpx !important;
    text-align: center;
}
::v-deep .van-empty__description {
	// font-weight: bold;
    font-size: 28rpx !important;
    line-height: 28rpx!important;
    text-align: center;
    // color: #333 !important;
}


  .pl15 {
    padding-left: 15px;
  }

  .pr15 {
    padding-right: 15px;
  }
</style>
  